<template>
  <div>
    <div class="footerContainer">
      <div class="topfooter">
        <!-- 底部的顶部 -->
        <div class="footer-top">
          <ul>
            <li>
              <a href="#"
                ><i class="iconfont icon-wxbgongju"></i>预约维修服务</a
              >
            </li>
            <li>
              <a href="#"
                ><i class="iconfont icon-7tianwuliyoutuihuo"></i
                >7天无理由退货</a
              >
            </li>
            <li>
              <a href="#"><i class="iconfont icon-15"></i>15天免费换货</a>
            </li>
            <li>
              <a href="#"><i class="iconfont icon-liwu"></i>满69包邮</a>
            </li>
            <li>
              <a href="#"
                ><i class="iconfont icon-weizhi"></i>520余家售后网点</a
              >
            </li>
          </ul>
        </div>
        <!-- 底部中间部分 -->
        <div class="footer-center">
          <ul>
            <li class="li-first">帮助中心</li>
            <li><a href="#">账户管理</a></li>
            <li><a href="#">购物指南</a></li>
            <li><a href="#">订单操作</a></li>
          </ul>
          <ul>
            <li class="li-first">服务支持</li>
            <li><a href="#">售后政策</a></li>
            <li><a href="#">自助服务</a></li>
            <li><a href="#">相关下载</a></li>
          </ul>
          <ul>
            <li class="li-first">线下门店</li>
            <li><a href="#">小米之家</a></li>
            <li><a href="#">服务网点</a></li>
            <li><a href="#">授权体验店/专区</a></li>
          </ul>
          <ul>
            <li class="li-first">关于小米</li>
            <li><a href="#">了解小米</a></li>
            <li><a href="#">加入小米</a></li>
            <li><a href="#">投资者关系</a></li>
            <li><a href="#">企业社会责任</a></li>
            <li><a href="#">廉洁举报</a></li>
          </ul>
          <ul>
            <li class="li-first">关注我们</li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">官方微信</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">公益基金会</a></li>
          </ul>
          <ul>
            <li class="li-first">特色服务</li>
            <li><a href="#">F 码通道</a></li>
            <li><a href="#">礼物码</a></li>
            <li><a href="#">防伪查询</a></li>
          </ul>
          <div class="content-right">
            <span class="phone">400-100-5678</span>
            <span>8:00-18:00（仅收市话费）</span>
            <span
              ><a class="service" href="#"
                ><i class="iconfont icon-xinxi"></i><span>人工客服</span></a
              ></span
            >
            <span>
              关注小米 :
              <i class="iconfont icon-xinlangweibo"> </i>
              <i class="iconfont icon-weixin"></i
            ></span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-container"></div>
      <div class="site-info">
        <div class="container">
          <div class="logo_ir">
            <router-link to="/home">
              <img src="./images/logo.png" alt="logo" />
            </router-link>
          </div>
          <div class="info-text">
            <p class="sitesr">
              <a href="#">小米商城 </a>
              <span>| </span>
              <a href="#">MIUI </a>
              <span>| </span>
              <a href="#">米家 </a>
              <span>| </span>
              <a href="#">米聊 </a>
              <span>| </span>
              <a href="#">多看 </a>
              <span>| </span>
              <a href="#">游戏 </a>
              <span>| </span>
              <a href="#">政企服务 </a>
              <span>| </span>
              <a href="#">小米天猫店 </a>
              <span>| </span>
              <a href="#">小米集团隐私政策 </a>
              <span>| </span>
              <a href="#">小米公司儿童保护规则 </a>
              <span>| </span>
              <a href="#">小米商城隐私政策 </a>
              <span>| </span>
              <a href="#">小米商城用户协议 </a>
              <span>| </span>
              <a href="#">问题反馈 </a>
              <span>| </span>
              <a href="#">Select Location</a>
            </p>
            <p class="sites">
              <a href="#">小米互联网法院法律服务工作站 </a>
              <span>| </span>
              <a href="#">中国消费者协会 </a>
              <span>| </span>
              <a href="#">北京市消费者协会 </a>
            </p>
            <p class="sites_color">
              @<a href="#">mi.com</a>京ICP证110507号<a href="#"
                >京ICP备10046444号</a
              ><a href="#">京公网安备11010802020134号</a
              ><a href="#">京网文[2020]0276-042号</a><br /><a href="#"
                >（京）网械平台备字（2018）第00005号</a
              ><a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a
              ><a href="#">营业执照</a><a href="#">医疗器械质量公告</a><br /><a
                href="#"
                >增值电信业务许可证</a
              >网络食品经营备案 京食药网食备202010048<a href="#"
                >食品经营许可证</a
              ><br />
              违法和不良信息举报电话：171-5104-4404
              <a href="#">知识产权侵权投诉</a>
              本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
          </div>
          <div class="info-links">
            <a href="#"><img src="./images/5.png" alt="1"/></a>
            <a href="#"><img src="./images/1.png" alt="1"/></a>
            <a href="#"><img src="./images/4.png" alt="1"/></a>
            <a href="#"><img src="./images/6.png" alt="1"/></a>
            <a href="#"><img src="./images/3.png" alt="1"/></a>
          </div>
        </div>
        <div class="slogan_ir"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
@import './icons/iconfont.css';
.footerContainer {
  background-color: rgb(255, 255, 255);
}
.topfooter {
  width: 1226px;
  margin: 0 auto;
  padding: 0 40px;
  // 底部的顶部
  .footer-top {
    border-bottom: 1px solid rgb(224, 219, 219);
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 25px 0;
      li {
        border-right: 1px solid #e0dbdb;
        display: flex;
        flex: 1;
        justify-content: center;
        a {
          color: #616161;
          font-size: 16px;
          &:hover {
            text-decoration: none;
            color: red !important;
          }
        }
      }
      li:last-child {
        border-right: none;
      }
    }
  }
  // 底部中间
  .footer-center {
    display: flex;
    justify-content: space-between;
    margin: 0 50px;
    padding-top: 25px;
    // ul列表
    .li-first {
      color: #424242;
      font-size: 14px;
      padding-bottom: 20px;
    }
    li {
      padding-bottom: 10px;
      color: #757575;
      a {
        color: #757575;
        cursor: pointer;
        text-decoration: none;
        &:hover {
          color: rgb(255, 103, 0) !important;
        }
      }
    }
    // 中间栏右侧
    .content-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        padding-bottom: 5px;
        &.phone {
          font-size: 20px;
          color: rgb(255, 103, 0);
        }
        .service {
          display: inline-block;
          height: 30px;
          border: 1px solid #ff6700;
          width: 120px;
          line-height: 30px;
          text-align: center;
          font-size: 13px;
          color: #ff6700;
        }
        .service:hover {
          text-decoration: none;
          transition: all 0.4s;
          background-color: rgb(242, 88, 7);
          span {
            color: #fff;
          }
        }
      }
    }
  }
}
.footer {
  /* background-color: #eaeaea; */
  .footer-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

    .footerList {
      padding: 20px;
      border-bottom: 1px solid #e4e1e1;
      border-top: 1px solid #e4e1e1;
      overflow: hidden;
      padding-left: 40px;

      .footerItem {
        width: 16.6666667%;
        float: left;

        h4 {
          font-size: 14px;
        }

        .footerItemCon {
          li {
            line-height: 18px;
          }
        }

        &:last-child img {
          width: 121px;
        }
      }
    }
  }
  .site-info {
    height: 206px;
    width: 1266px;
    margin: 0 auto;
    padding: 30px 0;
    /* 背景颜色 */
    /* background-color: #fafafa; */
    /* border: 1px solid red; */
    .container {
      width: 1266px;
      height: 160px;
      padding: 0;
      /* border: 1px solid red; */
      .logo_ir {
        width: 56px;
        height: 56px;
        float: left;
        /* border: 1px solid red; */
        img {
          width: 56px;
          height: 56px;
        }
      }
      .info-text {
        height: 100px;
        padding-left: 67px;
        .sites {
          color: #757575;
        }
        a:hover {
          text-decoration: none;
          color: #ff6700;
        }
        .sites_color {
          color: #b0b0b0;
          a {
            color: #b0b0b0;
          }
          a:hover {
            text-decoration: none;
            color: #ff6700;
          }
        }
      }
      .info-links {
        /* border: 1px solid red; */
        height: 28px;
        margin: 40px 0 15px 0;
        padding-left: 67px;

        a {
          /* border: 1px solid red; */
          width: 85px;
          height: 28px;
          display: inline-block;
          margin-right: 5px;
          img {
            width: 85px;
            height: 28px;
            /* border: 1px solid red; */
          }
        }
      }
    }
    .slogan_ir {
      height: 19px;
      margin: 30px auto 0;
      /* border: 1px solid red; */
      background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/slogan2020.png);
      background-position-x: center;
      background-repeat: no-repeat;
      box-sizing: content-box;
    }
  }
}

.iconfont {
  font-size: 25px;
  vertical-align: middle;
  padding-right: 5px;
  &.icon-xinlangweibo {
    padding-left: 5px;
  }
  &.icon-xinxi {
    font-size: 14px;
    vertical-align: baseline;
  }
}
</style>
